import * as React from 'react';
import * as style from './TestRouter.css';
import {NavLink, Redirect, Route, Switch} from "react-router-dom";
import {globalHistory} from "../App";


export default class TestRouter extends React.Component {
    render() {
        console.log("TestRouter", "render", JSON.stringify(globalHistory));
        return (
            <div className="fill-parent vertical">
                <ul className={style.header}>
                    <div>浩瑞泰运营平台</div>
                    <div>
                        <NavLink activeClassName={style.selected}
                                 to="/systemmanager">系统配置</NavLink>
                        <NavLink activeClassName={style.selected}
                                 to="/testmanager">测试界面</NavLink>
                        <NavLink activeClassName={style.selected}
                                 to="/routetest0">路由测试</NavLink>
                    </div>
                </ul>
                <Switch>
                    <Route path="/systemmanager"
                           component={SystemManager}/>
                    <Route path="/testmanager" component={TestManager}/>
                    <Route path="/routetest0"
                           component={RouteTest0}/>
                </Switch>
            </div>
        )
    }
}

class SystemManager extends React.Component {
    render() {
        console.log("SystemManager", this.props);
        return (
            <div>
                <h1>这是系统设置</h1>
            </div>
        );
    }
}

class TestManager extends React.Component {
    render() {
        return (
            <div>
                <h1>这是测试</h1>
            </div>
        );
    }
}

class RouteTest0 extends React.Component{
    render() {
        console.log("RouteTest0", this.props);
        return (
            <div>
                <h1>RouteTest0</h1>
                <Switch>
                    <Route path={`${this.props.match.url}/routetest1`}
                           component={RouteTest1}/>
                    <Redirect to={`${this.props.match.url}/routetest1`}/>
                </Switch>

            </div>
        );
    }
}

class RouteTest1 extends React.Component{
    render() {
        console.log("RouteTest1", this.props);
        return (
            <div>
                <h1>RouteTest1</h1>
                <Switch>
                    <Route path={`${this.props.match.url}/routetest2`}
                           component={RouteTest2}/>
                    <Redirect to={`${this.props.match.url}/routetest2`}/>
                </Switch>
            </div>
        );
    }
}

class RouteTest2 extends React.Component{
    render() {
        console.log("RouteTest2", this.props);
        return (
            <div>
                <h1>RouteTest2</h1>
            </div>
        );
    }
}